<template>
        <main-layout>
            <!-- 头部 -->
            <header-layout pagename="分类"/>
            
            <div class="sort-main">
                <!-- 搜索框 -->
                
                <sear-compot/>
                
                
                <div class="content">
                    <!-- 左边导航列表 -->
                    <div class="left">
                        <ul>
                            <li v-for="List in categoryList" :key="List.id">{{List.title}}</li>
                        </ul>
                    </div>
                    <!-- 右边商品列表 -->
                    <div class="right">
                        <div class="r-top">
                            <img src="../../images/home/1_banner.jpg" alt="">
                        </div>
                        <div class="r-cont" v-for="item in productList" :key="item.id">
                            <span class="r-cont-right">
                                <img :src="item.src" alt="">
                            </span>
                            <span class="r-cont-left">
                                <div class="title">
                                    <h3>{{item.title}}</h3>
                                    <p>{{item.des}}</p>
                                </div>
                                <div class="pice">
                                    <span class="pic">￥{{item.pic}}</span>
                                    <div class="car"><span>-</span>{{item.amount}}<span>+</span></div>
                                </div>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </main-layout>
</template>
<style lang="less" scoped>
@import '../../style/sort.less';
    
</style>
<script>
    import {classIfication} from '@/apis/sortApi'
    export default {
        data(){
            return{
                //左边分类列表
                // categoryList:null,
                categoryList:[
                    {
                        title:'精品推荐'
                    },
                    {title:'新鲜水果'},
                    {title:'今日新品'},
                    {title:'产地特色'},
                ],
                // 右边商品列表
                // productList:null
                productList:[
                    {
                        src:require('../../images/sort/2.sort_03.jpg'),
                        title:'进口苹果10斤一箱',
                        des:'个个饱满，甘甜可口',
                        pic:30,
                        amount:0
                    },
                    {
                        src:require('../../images/sort/2.sort_03-06.jpg'),
                        title:'进口柠檬5斤一箱',
                        des:'个个饱满，甘甜可口',
                        pic:20,
                        amount:0
                    },
                    {
                        src:require('../../images/sort/2.sort_03-08.jpg'),
                        title:'进口樱桃8斤一箱',
                        des:'个个饱满，甘甜可口',
                        pic:50,
                        amount:0
                    },
                    {
                        src:require('../../images/sort/2.sort_03-08.jpg'),
                        title:'进口樱桃8斤一箱',
                        des:'个个饱满，甘甜可口',
                        pic:50,
                        amount:0
                    },
                    {
                        src:require('../../images/sort/2.sort_03-08.jpg'),
                        title:'进口樱桃8斤一箱',
                        des:'个个饱满，甘甜可口',
                        pic:50,
                        amount:0
                    }
                ]
            }
        },
        created(){
            classIfication()
            .then(data=>{
                // this.categoryList = data.data.infoarr
                // this.productList = data.data
                console.log('--------------',this.categoryList);
            })
        }
    }
</script>

